<template>
    <div class="column">
        <section class="banner-wrap" :class="'nav' + navActiveIndex">
            <div class="layout-row">
                <h2>{{pageTitle}}</h2>
                <p>{{pageSubtitle}}</p>
            </div>
        </section>
        <div class="layout-row bread">
            當前位置：首頁
            <span class="gt">&gt;</span>{{pageTitle}}
        </div>
        <section class="content-section cf" :class="{'single-page': pageType > 2}">
            <div class="nav-wrap">
                <el-menu :mode="menuMode" :default-active="defaultActive">
                    <el-menu-item v-for="item in subColumns" :index="item.id + ''" @click="changeContent(item)" :key="item.id">
                        {{item.columnName}}
                    </el-menu-item>
                </el-menu>
            </div>
            <div class="main-content">
                <!--无内容-->
                <template v-if="pageType === -1">
                    <div class="content-wrap">暂无内容</div>
                </template>
                <!--新闻页-->
                <template v-if="pageType === 0 && articleList.length > 0">
                    <h1 class="tc">{{articleList[articleIndex].title}}</h1>
                    <p class="title-plus tc">{{articleList[articleIndex].subTitle}}</p>
                    <div class="pure-content" :class="{pics: pageTitle.indexOf('圖片')>-1}" v-html="articleList[articleIndex].content">
                    </div>
                    <div class="social-share"></div>
                </template>
                <!--列表页-->
                <template v-if="pageType === 1">
                    <div class="main-list-content">
                        <div class="news-list cf">
                            <div class="news-item" v-for="(item, index) in articleList" :key="item.id">
                                <a href="javascript:void(0)" @click="showArticle(index)" :title="item.title">
                                    <img :src="item.firstUrl" :alt="filterImageName(item.firstUrl)">
                                    <span class="title">{{item.title}}</span>
                                    <!--<span class="txt" v-html="filterContent(item.content)"></span>-->
                                    <span class="time">{{handleDate(item.createTime)}}</span>
                                </a>
                            </div>
                        </div>
                        <el-pagination layout="prev, pager, next" :page-size="pager.pageSize" @current-change="changePage" :total="this.pager.total">
                        </el-pagination>
                    </div>
                </template>
                <!--图片影片-->
                <template v-if="pageType === 2">
                    <div class="media-wrap">
                        <div class="media-column">
                            <el-radio-group v-model="mediaInfo.activeColumn">
                                <el-radio-button v-for="item in mediaInfo.subColumns" :label="item.id" :key="item.id">{{item.columnName}}</el-radio-button>
                            </el-radio-group>
                        </div>
                        <div class="media-list">
                            <div class="media-item" v-for="(item, index) in mediaInfo.mediaList" :key="item.id">
                                <template v-if="testPic(item.fileName)">
                                    <img class="img-show" @click="showBigPic(item)" :src="item.filePath" :alt="item.fileName">
                                </template>
                                <template v-else>
                                    <h4>{{item.fileTitle}}</h4>
                                    <video :id="'my-player'+ index" class="video-js vjs-big-play-centered" controls preload="auto" data-setup='{}' width="240" height="160">
                                        <source :src="item.filePath" type="video/mp4"></source>
                                        <p class="vjs-no-js">
                                            To view this video please enable JavaScript, and consider upgrading to a web browser that
                                            <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                        </p>
                                    </video>
                                </template>
                            </div>
                        </div>
                    </div>
                </template>
                <!--单页-->
                <template v-if="pageType === 3">
                    <div class="single-content contact-content">
                        <p>
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1518.253878889209!2d121.54311952374829!3d25.045774127189723!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442abdbe9d09785%3A0x67a00e8671e97df6!2zMTA0OTHlj7Dmub7lj7DljJfluILkuK3lsbHljYDlvqnoiIjljZfot6_kuIDmrrUzNi0xMOiZnw!5e0!3m2!1szh-CN!2s!4v1492747491924" width="900" height="600" frameborder="0" style="border:0" allowfullscreen=""></iframe>
                        </p>
                        <p class="add-item" v-for="item in configData.contact" :key="item">{{item}}</p>
                    </div>
                </template>
            </div>
            <transition name="fade">
                <div class="big-pic-wrap" v-if="isBigPicShow" @click="isBigPicShow=false">
                    <img :src="bigPicInfo.filePath" :alt="bigPicInfo.fileName">
                </div>
            </transition>
        </section>
    </div>
</template>
<script>
import {formatDate, loadJS} from 'common/util';
import {mapState} from 'vuex';
export default {
    name: 'topColumn',
    components: {
    },
    mounted() {
        this.init();
    },
    data() {
        return {
            activeColumnId: '',
            subColumns: [],
            defaultActive: '',
            articleList: [],
            // -1 暂无内容 0 文章 1 列表 2 圖片影片 3聯繫頁面
            pageType: -1,
            articleIndex: 0,
            pager: {
                total: 50,
                pageSize: 20,
                pageNum: 1
            },
            mediaInfo: {
                activeColumn: '',
                subColumns: [],
                mediaList: []
            },
            isBigPicShow: false,
            bigPicInfo: null,
            loadJSPromise: null,
            configData: {},
            menuMode: 'vertical'
        };
    },
    computed: {
        ...mapState(['pageTitle', 'pageSubtitle', 'navActiveIndex'])
    },
    watch: {
        '$route.query'(val) {
            this.init();
        },
        'mediaInfo.activeColumn'(val) {
            if (val) {
                this.mediaInfo.mediaList = [];
                this.getMediasByColumnId(val).then(res => {
                    this.mediaInfo.mediaList = res.data.list;
                });
            }
        },
        'mediaInfo.mediaList'(val) {
            this.$nextTick(() => {
                $('.video-js').each(function () {
                    window.videojs($(this).attr('id'), {});
                });
            });
        },
        'pageType'(val) {
            if (val === 0) {
                this.$nextTick(() => {
                    this.loadJSPromise.then(() => {
                        let shareNode = $('.social-share');
                        if (shareNode) {
                            shareNode.share({});
                        }
                    });
                });
            }
        }
    },
    methods: {
        init() {
            if (document.documentElement.clientWidth < 768) {
                this.menuMode = 'horizontal';
            }
            this.$axios('/homepage/getHomePageInfo.do').then(res => {
                Object.assign(this.configData, res.data);
                this.configData.aboutUs = this.configData.aboutUs.split('\n');
                this.configData.contact = this.configData.contact.split('\n');
                let phoneText = '電話：' + this.configData.phones.replace(',', ' / ');
                this.configData.contact.splice(-1, 0, phoneText);
            });
            let columnId = this.$route.query.id;
            // 子页面激活id
            let articleColumnId = this.$route.query.articleColumnId;

            this.subColumns = [];
            this.articleList = [];
            this.mediaInfo.subColumns = [];
            this.mediaInfo.mediaList = [];
            if (+columnId === -1) {
                this.pageType = 3;
                return;
            }
            this.getSubColumnsById(columnId).then(res => {
                this.subColumns = res.data;
                this.$nextTick(() => {
                    if (res.data.length > 0) {
                        let activeColumn = null;
                        if (articleColumnId) {
                            res.data.some(item => {
                                if (item.id === +articleColumnId) {
                                    activeColumn = item;
                                    return true;
                                }
                                return false;
                            });
                        }
                        else {
                            activeColumn = res.data[0];
                        }
                        this.defaultActive = activeColumn.id + '';
                        this.changeContent(activeColumn);
                    }
                });
            });
            this.loadJSPromise = loadJS('/assets/js/jquery.share.min.js');
        },
        getSubColumnsById(columnId) {
            return this.$axios({
                url: '/column/getSubColumnsById.do',
                params: {
                    id: columnId
                }
            });
        },
        getMediasByColumnId(columnId) {
            return this.$axios({
                url: '/media/getMediasByColumnId.do',
                params: {columnId}
            });
        },
        changeContent(item) {
            this.$route.query.articleColumnId = item.id;
            this.pageType = -1;
            this.activeColumnId = item.id;
            // 图片集合
            if (/圖片|影片|photo|video/i.test(item.columnName)) {
                this.pageType = 2;
                this.mediaInfo.activeColumn = '';
                this.mediaInfo.subColumns = [];
                this.mediaInfo.mediaList = [];
                this.getSubColumnsById(item.id).then(res => {
                    this.mediaInfo.subColumns = res.data;
                    this.$nextTick(() => {
                        if (res.data.length > 0) {
                            this.mediaInfo.activeColumn = res.data[0].id;
                        }
                    });
                });
            }
            else {
                // 列表或者文章
                this.getArticles(item).then(() => {
                    let pageType = -1;
                    // 单个文章直接显示
                    if (this.articleList.length === 1) {
                        pageType = 0;
                        this.articleIndex = 0;
                    }
                    if (this.articleList.length > 1) {
                        let articleId = +this.$route.query.articleId;
                        if (articleId) {
                            this.articleList.some((item, index) => {
                                if (item.id === articleId) {
                                    this.articleIndex = index;
                                    pageType = 0;
                                    return true;
                                }
                                return false;
                            });
                        }
                        else {
                            pageType = 1;
                        }
                    }
                    this.pageType = pageType;
                });
            }
        },
        getArticles() {
            return this.$axios({
                url: '/article/getArticlesByColumnId.do',
                params: {
                    columnId: this.activeColumnId,
                    pageSize: this.pager.pageSize,
                    pageNum: this.pager.pageNum
                }
            }).then(res => {
                this.articleList = res.data.list;
                this.pager.total = res.data.total;
            });
        },
        showBigPic(item) {
            this.bigPicInfo = item;
            this.isBigPicShow = true;
        },
        changePage(pageNum) {
            this.pager.pageNum = pageNum;
            this.getArticles();
        },
        handleDate(timestamp) {
            return formatDate(new Date(timestamp), 'yyyy-MM-dd');
        },
        filterContent(str) {
            return str.replace(/\<.*?\>/g, '');
        },
        filterImageName(str) {
            if (!str) {
                return '';
            }
            return str.match(/(\/[^\/]*\..*)/)[1];
        },
        calcClassname(pageSubtitle) {
            return (pageSubtitle + '').toLowerCase().replace(/[\s\&]/g, '');
        },
        showArticle(index) {
            this.pageType = 0;
            this.articleIndex = index;
        },
        testPic(str) {
            return /\.(jpg|gif|png)$/.test(str.toLowerCase());
        }
    }
};
</script>

<style lang="less">
.banner-wrap {
    height: 350px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 0;
    &.nav1 {
        background-image: url(/assets/imgs/banner-about.png);
    }
    &.nav2 {
        background-image: url(/assets/imgs/banner-train.png);
    }
    &.nav3 {
        background-image: url(/assets/imgs/banner-news.png);
    }
    &.nav4 {
        background-image: url(/assets/imgs/banner-pic.png);
    }
    &.nav5 {
        background-image: url(/assets/imgs/banner-contact.png);
    }
    .layout-row {
        width: 100%;
        padding: 190px 128px 0;
        color: #fff;
        h2 {
            font: 48px/50px "LiHei Pro", "Microsoft YaHei";
        }
        p {
            font: 32px/34px ' ';
            opacity: .7;
            margin-top: 20px;
        }
    }
}

.bread {
    line-height: 1;
    font-size: 16px;
    padding: 50px 0 20px;
    width: 1140px;
    text-align: right;
    border-bottom: 1px solid #ebebeb;
    color: #9b9b9b;
    margin-bottom: 50px;
    .gt {
        margin: 0 10px;
    }
}

.content-section {
    width: 1140px;
    margin: 0 auto;
    .contact-content {
        padding-bottom: 70px;
        font-size: 20px;
        line-height: 28px;
        color: #4a4a4a;
        p {
            margin-top: 20px;
        }
    }
    .nav-wrap {
        width: 260px;
        float: left;
        a {
            font-size: 20px;
            line-height: 30px;
            display: block;
            padding-left: 15px;
            border-left: 5px solid transparent;
            color: #888;
            margin-bottom: 30px;
        }
        .current {
            border-left: 5px solid #f6a623;
            color: #f6a623;
        }
        .el-menu {
            background-color: transparent;
        }
        .el-menu-item {
            font-size: 20px;
            height: 30px;
            line-height: 30px;
            display: block;
            padding-left: 15px;
            border-left: 5px solid transparent;
            color: #888;
            margin-bottom: 30px;
            &.is-active {
                border-left: 5px solid #f6a623;
                color: #f6a623;
            }
            &:hover {
                background-color: transparent;
            }
        }
    }
    // 列表
    .main-list-content {
        width: 900px;
        float: right;
        .news-item {
            width: 204px;
            float: left;
            margin-right: 20px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
            a {
                display: block;
                position: relative;
            }
            img {
                width: 204px;
                height: 128px;
                border: 0;
            }
            .title {
                color: #4a4a4a;
                display: block;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 10px 10px 0;
            }
            .txt {
                font-size: 14px;
                line-height: 20px;
                max-width: 450px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .time {
                padding: 0 10px 10px;
                font-size: 12px;
                margin-top: 5px;
            }
            span {
                color: #999;
                display: block;
            }
        }
    }
    .video-js {
        box-shadow: 0 0 30px #aaa;
    }
    // 单页
    &.single-page {
        .nav-wrap {
            display: none;
        }
        .main-content {
            float: none;
            width: 960px;
            margin: 0 auto;
        }
    }
    // 新闻页
    .main-content {
        float: right;
        width: 840px;
        color: #4a4a4a;
        padding-bottom: 100px;
        h1 {
            font-size: 24px;
            line-height: 38px;
        }
        .tc {
            text-align: center;
        }
        .title-plus {
            color: #9b9b9b;
        }
        .pure-content {
            &.pics {
                img {
                    width: 30%;
                    &+img {
                        margin-left: 5%;
                    }
                }
            }
            p {
                margin-top: 26px;
                font-size: 18px;
                line-height: 26px;
            }
        }
        img {
            max-width: 100%;
        }
    }
}


.share-btns {
    margin-top: 15px;
}

.share-btns .line-btn,
.share-btns .fb-share-button {
    float: right;
}

.media-wrap {
    .el-radio-button__inner {
        border: 0;
        padding: 10px 25px;
        border-radius: 50px !important;
        box-shadow: none;
        border: 0 !important;
        &:hover {
            color: #f6a623;
        }
    }
    .el-radio-button+.el-radio-button {
        margin-left: 10px;
    }
    .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        color: #fff;
        background-color: #f6a623;
        border-color: #f6a623;
        box-shadow: none;
    }
    .media-column {
        text-align: center;
    }
    .media-item {
        float: left;
        width: 33%;
        padding: 10px;
        text-align: center;
        margin-top: 35px;
        img {
            width: 240px;
            height: 160px;
        }
    }
}

.big-pic-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000000;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fade-enter-active,
.fade-leave-active {
    transition: all .5s;
}

.fade-enter,
.fade-leave-active {
    opacity: 0;
    transform: scale(1.2);
}

.social-share-icon {
    display: none;
}

.social-share {
    .social-share-icon {
        display: inline-block;
    }
}

@media (max-width: 767px) {
    .banner-wrap {
        height: 240px;
        .layout-row {
            width: 100%;
            padding: 250px 0 0 20px;
            color: #fff;
            h2 {
                font: 24px/50px "LiHei Pro", "Microsoft YaHei";
            }
            p {
                font: 20px/34px ' ';
                opacity: .7;
                margin-top: 0;
            }
        }
    }
    .bread {
        display: none;
    }
    .content-section {
        width: 100%;
        .nav-wrap {
            width: 100%;
            .el-menu-item {
                padding: 0 10px;
                height: auto;
                line-height: 45px;
                border-left: 0;
                margin-right: 5px;
                font-size: 16px;
                &:hover {
                    border-bottom-color: #f6a623;
                }
                &.is-active {
                    border-left: 0;
                    border-bottom-color: #f6a623;
                }
            }
        }
        .main-content {
            width: 100%;
            padding: 0 10px 80px;
        }
        .main-list-content {
            width: 100%;
            padding-bottom: 80px;
            .news-item {
                width: 100%;
                img {
                    width: 100%;
                    height: auto;
                }
            }
        }
        &.single-page {
            .main-content {
                width: 100%;
                padding: 0 10px 80px;
            }
        }
    }
    .media-wrap {
        .media-item {
            width: 100%;
            text-align: center;
            img {
                width: 100%;
                height: auto;
            }
            .video-js {
                margin: 0 auto;
            }
        }
    }
}
</style>
